<template>
  <div class="w-full h-full flex">
    <div class="w-64 pl-2.5 pr-2.5">
      <div @click="setSelected(relation)" v-for="relation in relationList"
           :class="currentSelect.value === relation.value?'bg-gray-100':''"
           class="flex cursor-pointer pl-2.5 h-8 items-center hover:bg-gray-100">
        <span>{{ relation.name }}</span>
      </div>
    </div>
    <div class="flex-1 h-full flex flex-col p-5">
      <SelectPostTable ref="selectPostTableRef" @setPostAll="setBusinessAll" @setPost="setBusiness"
                       v-show="currentSelect.type === 'post'"></SelectPostTable>
      <SelectRoleTable ref="selectRoleTableRef" @setRoleAll="setBusinessAll" @setRole="setBusiness"
                       v-show="currentSelect.type === 'role'"></SelectRoleTable>
      <div v-show="currentSelect.type === 'customPost'" class="flex flex-1 flex-col">
        <SelectCustomOrg ref="selectCustomOrgPostRef" @setCustomOrg="setCustomOrg"></SelectCustomOrg>
        <SelectPostTable ref="SelectCustomOrgPostTableRef" @setPostAll="setBusinessAll"
                         @setPost="setBusiness"></SelectPostTable>
      </div>
      <div v-show="currentSelect.type === 'customRole'" class="flex flex-1 flex-col">
        <SelectCustomOrg ref="selectCustomOrgRoleRef" @setCustomOrg="setCustomOrg"></SelectCustomOrg>
        <SelectRoleTable ref="SelectCustomOrgRoleTableRef" @setRoleAll="setBusinessAll"
                         @setRole="setBusiness"></SelectRoleTable>
      </div>
    </div>
    <div class="w-96 flex flex-col border">
      <div class="h-12 pl-2.5 flex items-center border-b">
        <span>已选:</span>
      </div>
      <div class="flex-1 h-0">
        <el-scrollbar>
          <div v-for="(data,index) in selectedData" class="h-12 w-full flex items-center border-b pl-2.5 pr-2.5 ">
            <span class="flex-1">{{ data.name }}#{{ data.businessName }}</span>
            <div class="w-12">
              <el-button link type="danger" @click="delSelected(index)">删除</el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, PropType, ref, watch} from "vue";
import SelectPostTable from './relation/SelectPostTable.vue'
import SelectRoleTable from './relation/SelectRoleTable.vue'
import SelectCustomOrg from './relation/SelectCustomOrg.vue'
import {FlowUserModel} from "/@/api/system/model/CommonModel";

const props = defineProps({
  modelValue: Array as PropType<FlowUserModel[]>,
})
const emit = defineEmits(['update:modelValue'])
const selectPostTableRef = ref()
const selectRoleTableRef = ref()
const SelectCustomOrgPostTableRef = ref()
const SelectCustomOrgRoleTableRef = ref()
const selectCustomOrgPostRef = ref()
const selectCustomOrgRoleRef = ref()
const currentSelect = ref<FlowUserModel>({
  value: '',
  name: ''
})
const selectedData = ref()
/**
 * 删除选择
 */
const delSelected = (index) => {
  selectedData.value.splice(index, 1)
  setSelected(currentSelect.value)
}
/**
 * 设置职位回调
 */
const setBusiness = (type, row, businessIdField, businessNameField) => {
  let index = selectedData.value.findIndex(res => currentSelect.value.value == res.value && res.businessId == row[businessIdField])
  if (type == 'add') {
    if (index == -1) {
      selectedData.value.push({
        name: currentSelect.value.name,
        value: currentSelect.value.value,
        businessId: row[businessIdField],
        businessName: row[businessNameField]
      })
    }
  } else {
    if (index != -1) {
      selectedData.value.splice(index, 1)
    }

  }

}
/**
 * 职位全选/取消回调
 */
const setBusinessAll = (rows, businessIdField, businessNameField) => {
  if (rows.length === 0) {
    //取消
    selectedData.value = selectedData.value.filter(res => res.value != currentSelect.value.value)
  } else {
    //全选
    rows.forEach(res => {
      let index = selectedData.value.findIndex(r => currentSelect.value.value == res.value && r.businessId == res[businessIdField])
      if (index == -1) {
        selectedData.value.push({
          name: currentSelect.value.name,
          value: currentSelect.value.value,
          businessId: res[businessIdField],
          businessName: res[businessNameField]
        })
      }
    })
  }
}


/**
 * 设置选中
 */
const setSelected = (relation) => {
  currentSelect.value = relation
  if (currentSelect.value.value === 'initiatorOrgPost') {
    //发起人组织职位
    let postIds = selectedData.value.filter(res => res.value == 'initiatorOrgPost').map(res => res.businessId);
    selectPostTableRef.value.setSelectedRow(postIds)
  } else if (currentSelect.value.value === 'initiatorCompanyPost') {
    //发起人公司职位
    let roleIds = selectedData.value.filter(res => res.value == 'initiatorCompanyPost').map(res => res.businessId);
    selectPostTableRef.value.setSelectedRow(roleIds)
  } else if (currentSelect.value.value === 'initiatorOrgRole') {
    //发起人组织角色
    let roleIds = selectedData.value.filter(res => res.value == 'initiatorOrgRole').map(res => res.businessId);
    selectRoleTableRef.value.setSelectedRow(roleIds)
  } else if (currentSelect.value.value === 'initiatorCompanyRole') {
    //发起人公司角色
    let roleIds = selectedData.value.filter(res => res.value == 'initiatorCompanyRole').map(res => res.businessId);
    selectRoleTableRef.value.setSelectedRow(roleIds)
  } else if (currentSelect.value.value === 'customOrgPost') {
    let data =  selectedData.value.find(res => res.value == 'customOrgPost');
    //自定义组织角色
    selectCustomOrgPostRef.value.setOrgKey(data.customOrg)
    let postIds = selectedData.value.filter(res => res.value == 'customOrgPost').map(res => res.businessId);
    SelectCustomOrgPostTableRef.value.setSelectedRow(postIds)
  } else if (currentSelect.value.value === 'customOrgRole') {
    let data =  selectedData.value.find(res => res.value == 'customOrgRole');
    //自定义组织角色
    selectCustomOrgRoleRef.value.setOrgKey(data.customOrg)
    let postIds = selectedData.value.filter(res => res.value == 'customOrgRole').map(res => res.businessId);
    SelectCustomOrgRoleTableRef.value.setSelectedRow(postIds)
  }

}
const relationList = [
  {
    name: '发起人组织职位',
    value: 'initiatorOrgPost',
    type: 'post'
  },
  {
    name: '发起人公司职位',
    value: 'initiatorCompanyPost',
    type: 'post'
  },
  {
    name: '发起人组织角色',
    value: 'initiatorOrgRole',
    type: 'role'
  },
  {
    name: '发起人公司角色',
    value: 'initiatorCompanyRole',
    type: 'role'
  },
  {
    name: '自定义组织职位',
    value: 'customOrgPost',
    type: 'customPost'
  },
  {
    name: '自定义组织角色',
    value: 'customOrgRole',
    type: 'customRole'
  }
]
/**
 * 设置自定义的组织机构变量
 */
const setCustomOrg = (value) => {
  selectedData.value.forEach(res => {
    if (res.value == currentSelect.value.value) {
      res.customOrg = value
    }
  })
}
watch(() => props.modelValue, (newValue) => {
  selectedData.value = newValue || []
}, {deep: true, immediate: true})
watch(() => selectedData.value, (newValue) => {
  emit('update:modelValue', newValue)
}, {deep: true})

</script>

<style scoped>

</style>